<template>
  <!-- 销项 -->
  <a-modal
    title="目标量化要求"
    class="normal-modal page-detail"
    :visible="visible"
    @cancel="$emit('cancel', false)"
  >
    <template slot="footer">
      <a-button
        key="back"
        @click="$emit('cancel', false)"
      >
        取消
      </a-button>
      <a-button
        v-if="!disabled"
        key="save"
        :loading="loading"
        type="primary"
        @click="save"
      >
        提交
      </a-button>
    </template>
    <a-form-model
      v-if="true"
      ref="bform"
      :model="localForm"
      :rules="rules"
    >
      <a-row>
        <a-col span="24" class="fixed">
          <a-form-model-item
            label="目标量化要求"
            prop="demand"
          >
            <b-input
              v-model="localForm.demand"
              :disabled="disabled"
            />
          </a-form-model-item>
        </a-col>
        <a-col span="12" class="fixed">
          <a-form-model-item
            label="提炼指标"
            prop="refiningTypeId"
          >
            <BSelect
              v-model="localForm.refiningTypeId"
              placeholder="请选择"
              :disabled="disabled"
              :request="refiningTypeRequest"
            />
          </a-form-model-item>
        </a-col>
        <a-col span="12" class="fixed">
          <a-form-model-item
            label="目标量化对象"
            prop="quantizationObjectTypeId"
          >
            <BSelect
              v-model="localForm.quantizationObjectTypeId"
              placeholder="请选择"
              :disabled="disabled"
              :request="quantizationObjectTypeRequest"
              @change="change"
            />
          </a-form-model-item>
        </a-col>
        <a-col span="12" class="fixed">
          <a-form-model-item
            label="目标量化类型"
            prop="quantizationTypeId"
          >
            <BSelect
              ref="quantizationTypeBSelect"
              v-model="localForm.quantizationTypeId"
              placeholder="请选择"
              :disabled="disabled"
              :request="quantizationTypeRequest"
            />
          </a-form-model-item>
        </a-col>
        <!-- <a-col span="12" class="fixed">
          <a-form-model-item
            label="层级"
            prop="levelTypeId"
          >
            <BSelect
              v-model="localForm.levelTypeId"
              placeholder="请选择"
              :disabled="disabled"
              :request="levelTypeRequest"
            />
          </a-form-model-item>
        </a-col> -->
        <a-col
          v-if="localForm.quantizationObjectTypeId === '732067002788745225'"
          span="12"
          class="fixed"
        >
          <a-form-model-item
            label="新技术类型"
            prop="newTechnologyTypeId"
            key="1"
          >
            <!--            <BSelect-->
            <!--              v-model="localForm.newTechnologyTypeId"-->
            <!--              placeholder="请选择"-->
            <!--              :disabled="disabled"-->
            <!--              :list="newTechnologyTypeList"-->
            <!--            />-->
            <a-select
              v-model="localForm.newTechnologyTypeId"
              placeholder="请选择"
              :disabled="disabled"
            >
              <a-select-option
                v-for="item in newTechnologyTypeList"
                :key="item.id"
              >
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <template v-if="localForm.quantizationObjectTypeId === '732067002788745224'">
          <a-col span="12" class="fixed">
            <a-form-model-item
              label="成果分类"
              prop="achievementsId"
              key="2"
            >
              <a-select
                v-model="localForm.achievementsId"
                placeholder="请选择"
                :disabled="disabled"
                @change="e=>achievementsIdChange(e,false)"
              >
                <a-select-option
                  v-for="item in achievementsList"
                  :key="item.id"
                >
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col span="12" class="fixed">
            <a-form-model-item
              label="成果等级"
              prop="resultsLevelId"
              key="3"
            >
              <a-select
                v-model="localForm.resultsLevelId"
                placeholder="请选择"
                :disabled="disabled"
              >
                <a-select-option
                  v-for="item in resultsLevelList"
                  :key="item.id"
                >
                  {{ item.levelName }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </template>
      </a-row>
    </a-form-model>
    <!--    <BForm-->
    <!--      v-else-->
    <!--      ref="bform"-->
    <!--      :config="formConfig"-->
    <!--      :form="localForm"-->
    <!--      :rule="rules"-->
    <!--    />-->
  </a-modal>
</template>

<script>
import BSelect from '@/components/BComponents/BSelect'
import Api from '@/api/science/base/quantitativeResponsibilityLetter'
import { getClassifyList } from '@/api/achievementsType'
import { FromtypeIdGetLevel } from '@/api/science'
import { treeList } from '@/api/technology'

export default {
  name: 'a' + Date.now(),
  data() {
    return {
      refiningTypeRequest: () => Api.typesLabelList({ type: 1 }),
      quantizationObjectTypeRequest: () => Api.typesLabelList({ type: 2 }),
      quantizationTypeRequest: async () => {
        //如果目标量化类型等于成果的时候，只能选择个数
        if (this.localForm.quantizationObjectTypeId === '732067002788745224') {
          let res = await Api.typesLabelList({ type: 3 })
          if (res.code === this.SUCCESS_CODE) {
            return { code: this.SUCCESS_CODE, data: res.data.filter(v => v.name === '个数') }
          }
        } else {
          return Api.typesLabelList({ type: 3 })
        }
      },
      levelTypeRequest: () => Api.typesLabelList({ type: 4 }),

      achievementsRequest: () => getClassifyList(),
      resultsLevelList: [],
      achievementsList: [],
      newTechnologyTypeList: [],
      loading: false,
      localForm: {
        // quantizationObjectTypeId: '',
        // resultsLevelId: '',
        // achievementsId: '',
        // newTechnologyTypeId: ''
      },
      rules: {
        demand: [{ required: true, message: '请输入目标量化要求', trigger: 'blur' }],
        // levelTypeId: [{ required: true, message: '请选择层级', trigger: 'change' }],
        newTechnologyTypeId: [{ required: true, message: '请选择新技术类型', trigger: 'change' }],
        quantizationObjectTypeId: [{ required: true, message: '请选择目标量化对象', trigger: 'change' }],
        quantizationTypeId: [{ required: true, message: '请选择目标量化类型', trigger: 'change' }],
        refiningTypeId: [{ required: true, message: '请选择提炼指标', trigger: 'change' }],
        resultsLevelId: [{ required: true, message: '请选择成果等级', trigger: 'change' }],
        achievementsId: [{ required: true, message: '请选择成果分类', trigger: 'change' }]
      }
    }
  },
  computed: {
    disabled() {
      return this.state === 2
    }
    /*eslint-disable*/
    // formConfig() {
    //   return [
    //     {
    //       row: true,
    //       children: [
    //         {
    //           type: 'input', value: 'demand', label: '目标量化要求', colSpan: 24,
    //           attrs: { disabled: this.disabled }
    //         },
    //         {
    //           type: BSelect, value: 'refiningTypeId', label: '提炼指标', colSpan: 12,
    //           attrs: {
    //             disabled: this.disabled,
    //             request: () => Api.typesLabelList({ type: 1 })
    //           }
    //         },
    //         {
    //           type: BSelect, value: 'quantizationObjectTypeId', label: '目标量化对象', colSpan: 12,
    //           attrs: {
    //             disabled: this.disabled,
    //             request: () => Api.typesLabelList({ type: 2 })
    //           },
    //           on: {
    //             change: () => {
    //               this.$refs.bform.clearValidate()
    //               this.$checkRequireItem()
    //               this.localForm.achievementsId = ''
    //               this.localForm.resultsLevelId = ''
    //               this.localForm.newTechnologyTypeId = ''
    //             }
    //           }
    //         },
    //         {
    //           type: BSelect, value: 'quantizationTypeId', label: '目标量化类型', colSpan: 12,
    //           attrs: {
    //             disabled: this.disabled,
    //             request: () => Api.typesLabelList({ type: 3 })
    //           }
    //         },
    //         {
    //           type: BSelect, value: 'levelTypeId', label: '层级', colSpan: 12,
    //           attrs: {
    //             disabled: this.disabled,
    //             request: () => Api.typesLabelList({ type: 4 })
    //           }
    //         },
    //         {
    //           type: BSelect, value: 'newTechnologyTypeId', label: '新技术类型', colSpan: 12,
    //           show: this.localForm.quantizationObjectTypeId === '732067002788745225',
    //           attrs: {
    //             disabled: this.disabled,
    //             request: async () => {
    //               let res = await treeList()
    //               if (res.code === this.SUCCESS_CODE) {
    //                 return { code: 200, data: res.data[0].children }
    //               }
    //             }
    //           }
    //         },
    //         {
    //           type: 'select', value: 'achievementsId', label: '成果分类', colSpan: 12,
    //           show: this.localForm.quantizationObjectTypeId === '732067002788745224',
    //           attrs: {
    //             disabled: this.disabled,
    //             data: this.achievementsList
    //             // request: () => getClassifyList()
    //           },
    //           on: {
    //             change: async (e) => {
    //               this.localForm.resultsLevelId = ''
    //               let res = await FromtypeIdGetLevel({ typeId: e, status: '1', pageNo: 1, pageSize: 1000 })
    //               if (res.code === this.SUCCESS_CODE) {
    //                 this.resultsLevelList = res.data.data
    //               }
    //             }
    //           }
    //         },
    //         {
    //           type: BSelect, value: 'resultsLevelId', label: '成果等级', colSpan: 12,
    //           show: this.localForm.quantizationObjectTypeId === '732067002788745224',
    //           attrs: {
    //             disabled: this.disabled,
    //             list: this.resultsLevelList,
    //             keys: ['id', 'levelName']
    //           }
    //         }
    //       ]
    //     }
    //   ]
    // }
  },
  props: {
    form: {
      type: Object,
      default() {
        return null
      }
    },
    visible: {
      type: Boolean,
      default: false
    },
    state: {
      type: Number,
      default: 0
    }
  },
  watch: {
    visible(newVal) {
      this.open()
      if (newVal) {
        this.$checkRequireItem()
        this.$refs.bform && this.$refs.bform.clearValidate()
      }
    }
  },
  async created() {
    // await this.getNewTechnologyTypeList()
    let res = await getClassifyList({ status: 1 })
    if (res.code === this.SUCCESS_CODE) {
      this.achievementsList = res.data
    }
  },
  methods: {
    async open() {
      await this.getNewTechnologyTypeList()
      if (this.form) {
        this.localForm = this.$assign(this.localForm, this.form)
        let res = this.newTechnologyTypeList.find(v => v.id === this.localForm.newTechnologyTypeId)
        if (!res) {
          this.localForm.newTechnologyTypeId = undefined
        }
        await this.achievementsIdChange(this.localForm.achievementsId, true)
        this.$checkRequireItem()
        this.$refs.bform && this.$refs.bform.clearValidate()
      } else {
        this.localForm = {}
      }
    },
    async getNewTechnologyTypeList() {
      let res = await treeList()
      if (res.code === this.SUCCESS_CODE) {
        this.newTechnologyTypeList = res.data[0].children
      }
    },
    change() {
      this.$checkRequireItem()
      this.$refs.bform.clearValidate()
      this.$refs.quantizationTypeBSelect.getData()
      if (this.localForm.resultsLevelId) this.localForm.resultsLevelId = undefined
      if (this.localForm.achievementsId) this.localForm.achievementsId = undefined
      if (this.localForm.newTechnologyTypeId) this.localForm.newTechnologyTypeId = undefined
      if (this.localForm.quantizationTypeId) this.localForm.quantizationTypeId = undefined
    },
    async achievementsIdChange(e, init = false) {
      if (this.localForm.resultsLevelId && !init) this.localForm.resultsLevelId = undefined
      if (!e) return
      let res = await FromtypeIdGetLevel({ typeId: e, status: '1', pageNo: 1, pageSize: 1000 })
      if (res.code === this.SUCCESS_CODE) {
        this.resultsLevelList = res.data.data
      }
    },
    save() {
      this.$refs.bform.validate(async (valid) => {
        if (valid) {
          let submitForm = this.$clone(this.localForm)
          let res
          this.loading = true
          if (submitForm.id) {
            res = await Api.edit(submitForm)
          } else {
            submitForm.stop = 1
            res = await Api.add(submitForm)
          }
          this.loading = false
          if (res.code === this.SUCCESS_CODE) {
            this.$noticeSuccess('提交成功')
            this.$emit('cancel', false)
            this.$emit('ok')
          }
        }
      })
    }
  }
}
</script>
<style>
.fixed {
  height: 65px;
}
</style>